<!-- 会员卡-红包列表 -->
<template name="redPacketList">
	<view class="container">
		<view class="red-packet margin" v-for="(item,index) in listData" v-bind:key="index" v-if="index<max||max==0" @click="toUse"
		 :data-index="index">
			<view class="red-packet-header">
				<image :src="url+'/static/imgs/red-packet.png'" class="bg"></image>
				<view class="col tips-text">
					<text>独家红包</text>
					<text>支付可抵扣现金{{item.money}}元</text>
				</view>
				<view class="red-packet-date">有效期：{{item.create_time}}~{{item.end_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		name: 'redPacketList',
		data() {
			return {
				url: app.globalData.baseImgUrl
			};
		},
		props: {
			listData: {
				type: Array
			},
			max: {
				type: Number,
				default: 0
			},
			choose: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			toUse(e) {
				var that = this;
				if (!that.choose) return;
				var index = e.currentTarget.dataset.index;
				app.globalData.chooseRedPacketInfo = that.listData[index];
				console.log('app.globalData.chooseRedPacketInfo', app.globalData.chooseRedPacketInfo);
				uni.navigateBack();
			},
		}
	}
</script>

<style scoped>
	/* 红包 */
	.red-packet-header {
		width: 100%;
		height: 238rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.red-packet-header .bg {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
		/* box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2); */
	}

	.red-packet-header .tips-text {
		position: absolute;
		top: 38rpx;
		left: 200rpx;
		align-items: center;
	}

	.red-packet-date {
		position: absolute;
		bottom: 20rpx;
		left: 48rpx;
		color: #898887;
		font-size: 28rpx;
	}

	.red-packet-header .tips-text text {
		color: #fff;
		font-size: 28rpx;
	}

	.red-packet-header .tips-text text:nth-child(2) {
		margin-top: 18rpx;
		font-weight: Medium;
		color: #D73D1E;
		font-size: 33rpx;
	}
</style>
